<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				// 点击超链接以后,删除一个员工的信息
				
				// 获取所有额超链接
				var allA = document.getElementsByTagName("a");
				
				// 为每个超链接都绑定一个单机响应函数
				for(var i=0;i<allA.length;i++){
					allA[i].onclick = function(){
						// 点击超链接以后需要删除超链接所在的那行
						// 这里我们点击哪个超链接this就是谁
						// 获取当前tr
						var tr = this.parentNode.parentNode;
						
						// 获取要删除员工的名字
						// var name = tr.getElementsByTagName("td")[0].innerHTML;
						var name = tr.children[0].innerHTML;
						
						// 删除之前弹出一个提示框
						// confirm()用于弹出一个带有确认和取消按钮的提示框,需要一个字符串作为参数,
						// 该字符串将会作为提示文字显示出来
						// 如果用户点击确认则会返回true,如果点击取消则返回false
						var flag = confirm("确定删除"+name+"吗?");
						
						// 如果用户点击确认
						if(flag){
							// 删除tr
							tr.parentNode.removeChild(tr);
						}
						
						// 点击超链接以后,超链接会跳转页面,这个是超链接的默认行为,
						// 但是此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消默认行为
						return false;
					}
				}
			}
			
			
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="javascript:;">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>Jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>
		<div id="formDiv">
			<h4>添加新员工</h4>
			<table>
				<tr>
					<td class="word">name:</td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email:</td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salsry:</td>
					<td class="inp">
						<input type="text" name="salsry" id="salsry" />
					</td>
				</tr>
				<tr>
					<td>
						<button id="addEmpButton" value="abc">
							Submit
						</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
